<template>
	<div>
		<e-skeleton :show="loading">
			<e-skeleton-item variant="swiper"></e-skeleton-item>
		</e-skeleton>

		<!-- content -->
		<view class="content">
			<swiper class="swiper" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<image class="cover" src="../static//temp/cover.png" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>

			<view class="card base-info">
				<view class="countdown e-flex-x">
					<view class="badge">
						<view class="badge-bg"></view>
						<text style="">正在进行</text>
					</view>
					<view class="timer">
						<text>00时02分59秒后</text>
					</view>
					<text>结束</text>
				</view>
				<view class="title">
					<text>云炉紫砂壶</text>
				</view>
				<view class="e-flex-x" style="align-items: center">
					<view class="e-flex-1">
						<text class="gray">抢购价：</text>
						<text class="price lg">178,098.00</text>
						<text class="price">元</text>
					</view>
					<view>
						<text class="gray e-m-l-10">剩余可买数</text>
						<text class="num">1</text>
					</view>
				</view>

				<view class="dash-line e-m-t-20 e-m-b-20"></view>

				<view class="e-flex-x">
					<view class="e-flex-1">
						<view class="e-flex-x" style="align-items: center">
							<image class="icon e-m-r-10 e-m-b-10" src="../static/store-icon.png"></image>
							<text class="gray">寄售服务商</text>
						</view>
						<text>深圳市华创纵横文化发展有限公司</text>
					</view>
					<view class="e-flex-1">
						<view class="e-flex-x" style="align-items: center">
							<image class="icon e-m-r-10 e-m-b-10" src="../static/store-icon.png"></image>
							<text class="gray">存储仓库</text>
						</view>
						<text>嘉年华文化科技有限公司</text>
					</view>
				</view>
			</view>

			<view class="detail-card">
				<view class="title">
					<text>商品详情</text>
				</view>
			</view>
		</view>

		<view class="action-bar e-p-20">
			<e-button size="normal" type="primary" color="#E4423B" shape="circle" :text="$t('确定')" @click="confirm" :throttleTime="1000"></e-button>
		</view>
	</div>
</template>

<script setup>
import { routeJump } from '@/common/utils';
import { ref } from 'vue';
const loading = ref(false);


const confirm = () => {
	// uni.showModal({
	// 	title:"温馨提示",
	// 	content:"用户您好!您尚未填写收货信息，为保证您能够顺利参与购买，请您根据提示填写真实有效的收货信息。您也可以通过以下方式填写或修改您的收货信息:进入我的页面—点击我的地址-点击地址管理添加管理地址。",
		
	// })
	
	// uni.showModal({
	// 	title:"温馨提示",
	// 	content:"请先补充实名信息后再购买！",
		
	// })
	routeJump("./confirm?id=1",'navigateTo')
}

</script>

<style lang="scss" scoped>
.swiper {
	height: 100vw;
	background-color: #cccccc20;
	.swiper-item {
		width: 750rpx;
		height: 750rpx;
		image.cover {
			width: 750rpx;
			height: 750rpx;
		}
	}
}

.dash-line {
	width: 100%;
	height: 2rpx;
	border: 1rpx dashed #ccc;
}

.base-info {
	margin-top: -40rpx;
	z-index: 99;
	position: relative;
	&.card {
		width: 750rpx;
		background: linear-gradient(180deg, rgba(245, 211, 211, 1) 0%, rgba(255, 255, 255, 1) 30%);
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		// border: 2rpx solid;
		// border-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) 2 2;
		padding: 20rpx;
	}
	.icon {
		width: 28rpx;
		height: 28rpx;
	}
}

.detail-card {
	background-color: #fff;
	margin-top: 20rpx;
	padding-top: 10rpx;
	padding-bottom: 10rpx;
	.title {
		padding: 0 20rpx;
		font-size: 28rpx;
	}
}

.countdown {
	height: 44rpx;
	line-height: 44rpx;
	background: linear-gradient(270deg, rgba(228, 66, 59, 0) 0%, #e4423b20 100%);
	color: #333;
	margin-left: 10rpx;
	.badge {
		position: relative;
		width: 5em;
		padding: 0 10rpx;
		margin-left: -20rpx;
		margin-right: 20rpx;
		text {
			position: relative;
			z-index: 1;
			color: white;
			display: block;
			width: 4em;
			margin-left: 10rpx;
		}
	}
	.badge-bg {
		width: 100%;
		height: 44rpx;
		background: #e4423b;
		color: white;
		border-radius: 10rpx;
		padding: 0 10rpx;
		margin-right: 10rpx;
		transform: skew(-20deg);
		position: absolute;
		z-index: 0;
	}
}

.title {
	height: 50rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 36rpx;
	color: #333333;
	line-height: 50rpx;
	font-style: normal;
	margin: 10rpx 0;
}

.gray {
	font-family: PingFangSC, PingFang SC;
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	line-height: 34rpx;
	text-align: left;
	font-style: normal;
}

.price {
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 24rpx;
	color: #e4423b;
	text-align: left;
	font-style: normal;

	&.lg {
		font-size: 40rpx;
	}
}

.num {
	width: 18rpx;
	height: 56rpx;
	font-family: PingFangSC, PingFang SC;
	font-weight: 600;
	font-size: 40rpx;
	color: #333333;
	line-height: 56rpx;
	text-align: center;
	font-style: normal;
}

.action-bar {
	position: fixed;
	bottom: 0;
	width: 100vw;
	z-index: $z-index-high;
	background-color: #ffffff;
}
</style>
